A line chart with an HTML key

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.line.js"></script>

Put this where you want the chart to show up:

<div style="position: relative">
    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
    <div style="position: absolute; left: 600px; top: 25px" id="myKey"></div>
</div>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [
                [5,4,1,6,8,5,3],
                [23,26,27,21,24,25,26],
                [3,1,5,6,2,4,5],
                [15,16,13,18,16,13]
            ],
            options: {
                textAccessible: true,
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
            }
        }).draw()
        
        document.getElementById('myKey').style.top = line.Get('gutter.top') + 'px';
        
        RGraph.HTML.Key('myKey', {
            'colors': line.Get('colors'),
            'labels': ['John','Fred','Joe','Luis'],
            'labelCss_0': {'color':'red'}
        });
    };
</script>